<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
        <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'"> -->
        <title>便签</title>
        <script src="../../lib/md5.js"></script>

        <script src="../../utils/utils.js"></script>
        <script src="../../lib/vue.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../../lib/element-ui/index.css" />
        <link rel="stylesheet" href="../../lib/style.css" />
        <!-- 引入组件库 -->
        <script src="../../lib/element-ui/index.js"></script>
        <script src="../../component/head/head.js"></script>
        <link rel="stylesheet" href="../../component/head/head.css" />

        <style>
            .list {
                margin-left: 20px;
                display: flex;
                margin-top: 25px;
                max-height: 800px;
            }

            .text {
                width: 230px;
            }

            .time {
                width: 220px;
            }

            .list_div {
                height: 40px;
            }
        </style>
        <title>工具集</title>
    </head>

    <body class="backgrond">
        <div id="app">
            <my-menu></my-menu>
            <div id="main">
                <strong style="display: none" id="counter" data-msg=""></strong>
                <div class="back" @click="back">
                    <i class="el-icon-back back">返回</i>
                </div>
                <div class="list">
                    <div class="list_div">
                        <el-input
                            class="text"
                            autofocus="true"
                            type="textarea"
                            :autosize="{ minRows: 1.35, maxRows: 4}"
                            placeholder="请输入内容"
                            v-model="inputText"
                        >
                        </el-input>
                    </div>
                    <div class="block list_div">
                        <el-date-picker
                            v-model="datetime"
                            type="datetime"
                            placeholder="选择日期时间"
                            :default-time="defTime"
                        >
                        </el-date-picker>
                    </div>
                    <div class="list_div">
                        <el-button type="primary" @click="addUp"
                            >添加</el-button
                        >
                    </div>
                </div>
                <div id="msg"></div>
                <div id="list">
                    <div class="list" v-for="(value, key) in up_data">
                        <div @id="key" class="margin_div text">
                            <div style="max-width: 220px">{{value.text}}</div>
                        </div>
                        <div
                            id="datetime"
                            class="margin_div time"
                            v-text="value.timeLeft"
                        >
                            剩余：0天0时0分0秒
                        </div>
                        <div>
                            <el-button
                                type="primary"
                                size="mini"
                                @click="reset(value, key)"
                                >重置
                            </el-button>
                            <el-popover
                                placement="top"
                                width="160"
                                v-model="value.visible"
                            >
                                <p>确定删除吗？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button
                                        size="mini"
                                        type="text"
                                        @click="value.visible = false"
                                        >取消</el-button
                                    >
                                    <el-button
                                        type="primary"
                                        size="mini"
                                        @click="deleteUp(key)"
                                        >确定</el-button
                                    >
                                </div>
                                <el-button
                                    size="mini"
                                    style="max-height: 40px"
                                    type="danger"
                                    slot="reference"
                                    >删除</el-button
                                >
                            </el-popover>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="./index.js"></script>
    </body>
</html>
